<template>
  <div class="div_er">
    <!-- 面包屑 -->
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      closable
      :type="tag.type"
      class="div_tag"
      @click="$router.push({ path: tag.path })"
      @close="closeTag(index)"
    >
      {{ tag.title }}
    </el-tag>
    <!--  -->

    <el-dropdown class="div_right" @command="close">
      <el-button type="primary" class="button">
        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">关闭所有</el-dropdown-item>
        <el-dropdown-item command="b">关闭其他</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [],
    };
  },
  watch: {
    $route: {
      handler(newval, oldval) {
        // this.name = newval.meta.title;
        this.setTags(newval);
      },
    },
  },
  methods: {
    setTags(route) {
      var newPath = this.tags.some((item) => {
        return item.path === route.fullPath;
      });
      console.log(newPath);
      if (!newPath) {
        this.tags.push({ title: route.meta.title, path: route.fullPath });
      }
    },
    //删除一个
    closeTag(index) {
      this.tags.splice(index, 1);
    },
    //删除所有 或者 删除其他
    close(val) {
      console.log(val);
      if (val == "a") {
        this.tags = [];
        this.$router.push({ path: "/home" });
      } else if (val == "b") {
        this.tags = this.tags.filter((item) => {
          if (item.path == this.$route.path) {
            return item;
          }
        });
      }
    },
  },
  // created() {
  //   this.setTags(this.$route);
  // },
};
</script>

<style lang="scss">
.div_er {
  width: 100%;
  display: flex;
  .div_tag{
    height: 100%;
  }
  .div_right {
    position: absolute;
    right: 10px;
    margin:0px;
  }
}
</style>